import {
  Button,
  Icon,
  Popover,
  ActionList,
  Modal,
  LegacyStack,
  ChoiceList,
  SkeletonBodyText,
  LegacyCard,
  Frame,
  Loading,
} from "@shopify/polaris";
import { useEffect } from "react";
import { PostOrderListApi } from "../../api/order";
import styled from "./index.module.less";
import { useState, useCallback } from "react";
import { ChevronDownMinor, MobileAcceptMajor } from "@shopify/polaris-icons";

import { useNavigate } from "react-router-dom";

import IndexTableWithLoadingExample from "./Tables";

const App = () => {
  const [show, setShow] = useState(false);

  const Navigate = useNavigate();

  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );

  //modal框
  const CURRENT_PAGE = "current_page";
  const ALL_CUSTOMERS = "all_customers";
  const SELECTED_CUSTOMERS = "selected_customers";
  const CSV_EXCEL = "csv_excel";
  const CSV_PLAIN = "csv_plain";

  const [active, setActive] = useState(false);
  const [selectedExport, setSelectedExport] = useState<string[]>([]);
  const [selectedExportAs, setSelectedExportAs] = useState<string[]>([]);

  const handleModalChange = useCallback(() => setActive(!active), [active]);

  const handleClose = () => {
    handleModalChange();
    handleSelectedExport([]);
    handleSelectedExportAs([]);
  };

  const handleSelectedExport = useCallback(
    (value: string[]) => setSelectedExport(value),
    []
  );

  const handleSelectedExportAs = useCallback(
    (value: string[]) => setSelectedExportAs(value),
    []
  );

  const [tableData, setTableData] = useState([] as ORDERMODULE.Items[]);

  useEffect(() => {
    PostOrderListApi({
      format: "json",
      method: "get.order.list",
      page_no: 1,
      page_size: 10,
      sign: "fb09950b88a8db8df72cf46419f020c5",
      status: "0",
      store_locale: "en_US",
      timestamp: 1691390610,
      token: "9d486d74d765e9b033ee6f667d137a0a",
    }).then((res) => {
      console.log(res);
      setTableData(res.data.items);
      setShow(true);
    });
  }, []);

  return (
    <div className={styled.box}>
      <div className={styled.header}>
        <div className={styled.left}>
          订单:
          <div style={{ height: "250px" }}>
            <Popover
              active={popoverActive}
              activator={
                <div className={styled.btn} onClick={togglePopoverActive}>
                  <div>所有地点</div>
                  <div className={styled.icon}>
                    <Icon source={ChevronDownMinor}></Icon>
                  </div>
                </div>
              }
              autofocusTarget="first-node"
              onClose={togglePopoverActive}
            >
              <div className={styled.action}>
                <ActionList
                  actionRole="menuitem"
                  items={[
                    {
                      content: "所有地点",
                      suffix: <Icon source={MobileAcceptMajor}></Icon>,
                    },
                    { content: "Huaqiao room 1706, DaQiao Road 1" },
                    {
                      content: "Tcustom",
                      suffix: <div className={styled.yingyong}>应用</div>,
                    },
                  ]}
                />
              </div>
            </Popover>
          </div>
        </div>
        <div className={styled.right}>
          <div className={styled.daochu}>
            <Button size="slim" onClick={handleModalChange}>
              导出
            </Button>
          </div>
          <Button size="slim" primary onClick={() => Navigate("create")}>
            创建订单
          </Button>
        </div>
      </div>
      <div className={styled.content}>
        {/* Tables */}

        {show && <IndexTableWithLoadingExample tableData={tableData} />}
        {!show && (
          <LegacyCard title="">
            <LegacyCard.Section>
              <SkeletonBodyText lines={1} />
            </LegacyCard.Section>
            <LegacyCard.Section>
              <SkeletonBodyText />
            </LegacyCard.Section>
          </LegacyCard>
        )}

        {/* Tables */}
      </div>

      {/* 页面组件modal */}
      <div style={{ height: "500px" }}>
        <Modal
          open={active}
          onClose={handleClose}
          title="导出"
          primaryAction={{
            content: "导出订单",
            onAction: handleClose,
          }}
          secondaryActions={[
            {
              content: "取消",
              onAction: handleClose,
            },
          ]}
        >
          <Modal.Section>
            <LegacyStack vertical>
              <LegacyStack.Item>
                <ChoiceList
                  title="导出"
                  choices={[
                    { label: "当前页面", value: CURRENT_PAGE },
                    { label: "所有订单", value: ALL_CUSTOMERS },
                    { label: "按日期显示的订单", value: SELECTED_CUSTOMERS },
                  ]}
                  selected={selectedExport}
                  onChange={handleSelectedExport}
                />
              </LegacyStack.Item>
              <LegacyStack.Item>
                <ChoiceList
                  title="导出为"
                  choices={[
                    {
                      label: "用于 Excel, Numbers, 或其他电子表格程序的CSV",
                      value: CSV_EXCEL,
                    },
                    { label: "普通 CSV 文件", value: CSV_PLAIN },
                  ]}
                  selected={selectedExportAs}
                  onChange={handleSelectedExportAs}
                />
              </LegacyStack.Item>
            </LegacyStack>
          </Modal.Section>
        </Modal>
      </div>
      {/* 页面组件modal */}
      {!show && (
        <Frame>
          <Loading />
        </Frame>
      )}
    </div>
  );
};

export default App;
